<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="供应商">

            <Vendor v-model="formData.vendorId" v-model:name="formData.vendorName"></Vendor>
        </el-form-item>

        <el-form-item label="日期">
            <el-date-picker v-model="formData.poDate" type="date" />

        </el-form-item>
        <el-form-item label="采购人">
            <el-input v-model="formData.purchaser" disabled placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="总金额">
            <el-input v-model="formData.totalPrice" disabled
                :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                :parser="(value) => value.replace(/\$\s?|(,*)/g, '')" />
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="formData.brief" type="textarea" placeholder="请输入备注" />
        </el-form-item>

    </el-form>
    <el-divider />

    <PickProduct @get-rows-event="getRowsEvent"> </PickProduct>

    <el-table :data="wms_store.poItems">
        <el-table-column fixed prop="productId" label="编号" width="80" />
        <el-table-column prop="productName" label="名称" width="100" />

        <el-table-column prop="statusX" label="状态" width="80" />
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img" class="img">
            </template>
        </el-table-column>
        <el-table-column label="采购数量" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.qty" :min="1" size="small" @change="change(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column label="单价" width="150">
            <template #default="scope">
                <el-input-number v-model="scope.row.price" :min="1" :precision="2" size="small"
                    @change="change(scope.row)">
                    <template #prefix>
                        <span>￥</span>
                    </template>
                </el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="总价" width="150">
            <template #default="scope">
                <el-input v-model="scope.row.totalPrice" :disabled="true" :precision="2" size="small">
                    <template #prefix>
                        <span>￥</span>
                    </template>
                </el-input>
            </template>
        </el-table-column>
        <el-table-column label="备注" width="150">
            <template #default="scope">
                <el-input v-model="scope.row.brief" size="small" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">

                <el-button type="danger" size="small" @click="deleteClick(scope)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <el-button type="primary" @click="onAdd">新建采购单</el-button>
</template>
<script setup lang="ts">



import Vendor from '@/components/Vendor.vue'
import { dayjs, ElMessageBox, ElMessage } from 'element-plus'
import { wmsStore } from '@/store/pinia'
import PickProduct from '@/components/PickProduct.vue'
import poApi from '@/api/po'
import { Message } from '@element-plus/icons-vue'

const wms_store = wmsStore()




const formData = reactive({
    vendorId: '',
    vendorName: '',
    poDate: new Date(dayjs().add(1, 'day')),
    purchaser: wms_store.nickName,
    totalPrice: 0,

    brief: ''
})

const change = (row: any) => {

    row.totalPrice = row.qty * row.price
    sumTotalPrice()
}

const sumTotalPrice = () => {

    let totalPrice = wms_store.poItems.reduce((total: number, row: any) => {

        return total + row.totalPrice

    }, 0)

    formData.totalPrice = Number(totalPrice.toFixed(2))


}
const getRowsEvent = (selectedProducts: any) => {

    console.log(selectedProducts);

    selectedProducts.forEach((item: any) => {
        let temp = wms_store.poItems.filter((it: any) => it.productId == item.id)

        if (temp.length > 0) {
            //存在
            return
        }

        wms_store.poItems.push({
            productId: item.id,
            productName: item.name,
            statusX: item.statusX,
            img: item.img[0],
            qty: 1,
            price: 1,
            totalPrice: 1,
            brief: ""
        })


    });


    sumTotalPrice()

}

const deleteClick = (scope: any) => {

    wms_store.poItems.splice(scope.$index, 1)

}
onMounted(() => {




})

const onAdd = () => {
    poApi.insert({
        items: wms_store.poItems,
        vendorId: formData.vendorId,
        poDate: formData.poDate,
        vendorName: formData.vendorName,
        purchaser: formData.purchaser,
        totalPrice: formData.totalPrice,
        brief: formData.brief
    }).then((res: any) => {
        ElMessage.success('新建成功')
        wms_store.poItems = []
    })


}


</script>

<style scoped>
.img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
</style>